<template>
  <div id="dialogLifeNum">
    <el-dialog
      :title="title"
      :visible.sync="dialogData.isShow"
      width="420px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          @submit.native.prevent
        >
          <el-form-item :label="labelName" prop="num">
            <el-input-number
              v-model="ruleForm.num"
              size="mini"
              controls-position="right"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button type="success" :loading="loading" @click="confirmLabel"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'dialogLifeNum',
  msg: '虚拟分享量/虚拟播放量-弹窗',
  props: ['dialogData'],
  data() {
    return {
      type: '', // 通过type区分-虚拟分享量/虚拟播放量
      loading: false,
      title: '',
      labelName: '',
      ruleForm: {
        num: 0
      },
      rules: {
        num: [
          { required: true, message: '数量不能为空' }
          /* {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'} */
        ]
      }
    }
  },
  mounted() {
    this.getTitle()
  },
  methods: {
    //获取标题
    getTitle() {
      this.type = this.dialogData.type
      this.num = this.dialogData.num
      switch (this.type) {
        case 'share':
          this.title = '修改分享量'
          this.labelName = '虚拟分享量'
          break
        case 'video':
          this.title = '修改播放量'
          this.labelName = '虚拟播放量'
          break
        case 'read':
          this.title = '修改阅读量'
          this.labelName = '虚拟阅读量'
          break
      }
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
      this.dialogData.type = ''
    },
    /* 确认提交 */
    confirmLabel() {
      this.loading = true
      switch (this.type) {
        case 'share':
          // 分享量
          this.$emit('changeNum', this.ruleForm.num)
          break
        case 'video':
          // 播放量
          this.$emit('changePlayNum', this.ruleForm.num)
          break
        case 'read':
          // 阅读量
          this.$emit('changeReadNum', this.ruleForm.num)
          break
      }
      this.loading = false
      /*this.cancelLabel()*/
    }
  }
}
</script>

<style lang="less">
#dialogLifeNum {
  .el-input-number--mini {
    width: 220px;
  }
}
</style>
